<template>
  <div class="DesignTeam">
    <Search show-action>
      <template #left>
        <div @click="onSearch">地址</div>
      </template>
    </Search>
    <div
      class="DesignTeam-content"
      v-for="item in teamlist"
      :key="item.team_id"
    >
      <div class="DesignTeam-content-top">
        <div class="DesignTeam-content-top-left">
          <img
            class="touxiang"
            :src="item.team_touxiang"
          />
          <span>{{ item.team_user }}</span>
          <p>{{ item.team_title }}</p>
          <div class="DesignTeam-content-top-left-btm">
            <span>{{ item.team_year }}</span
            ><span>{{ item.shux }}</span
            ><span>案例作品64套</span>
          </div>
        </div>
        <button class="DesignTeam-content-button">前往咨询</button>
      </div>
      <div class="DesignTeam-content-bottom">
        <div>
          <img
            :src="item.team_img"
            alt=""
          />
        </div>
        <div>
          <img
            :src="item.team_img"
            alt=""
          />
        </div>
        <div>
          <img
            :src="item.team_img"
            alt=""
          />
        </div>
      </div>
    </div>
    <van-loading
      size="24px"
      v-if="isLoading"
      >加载中...</van-loading
    >
    <button
      class="btn"
      v-else
      type="primary"
      block
      @click="getMores"
    >
      {{ moreText }}
    </button>
  </div>
</template>

<script>
import { getDesignTeam } from '@/api/designs';
import Search from '@/components/Search';
export default {
  components: {
    Search,
  },
  data() {
    return {
      hasMore: false,
      isLoading: false,
      // page: 0,
      // limit: 4,
      teamlist: [],
    };
  },
  created() {
    this.getDesignTeam();
  },
  methods: {
    async getDesignTeam() {
      //当数据达到零界点的时候将直接return跳出
      //if (this.hasMore !== false) return;
      //  ++this.page;
      const res = await getDesignTeam(); //{ page: this.page, limit: this.limit }
      this.teamlist = res.data;
      // 上一页和下一页数据进行拼接
      // this.teamlist = [...this.teamlist, ...res.data];
      // 计算数据请求的临界点
      //   this.hasMore = this.page * this.limit > this.teamlist.length;
    },
    getMores() {
      this.isLoading = true;
      setTimeout(() => {
        this.getDesignTeam();
        this.isLoading = false;
      }, 500);
    },
  },
  computed: {
    moreText() {
      return this.hasMore ? '我也是有底线的' : '加载更多';
    },
  },
};
</script>
<style
  lang="scss"
  scoped
>
.DesignTeam {
  margin-top: 46px;
  .btn {
    width: 100%;
    outline: none;
    border: 0;
    background-color: #fff;
    font-size: 12px;
    color: #969799;
    margin-bottom: 5px;
  }
  .van-loading {
    text-align: center;
  }
  .DesignTeam-content {
    .DesignTeam-content-top {
      overflow: hidden;
      .DesignTeam-content-top-left {
        float: left;
        color: #101010;
        .DesignTeam-content-top-left-btm {
          margin-left: 53px;
          color: #827e7e;
          span {
            font-size: 12px;
          }
          span:nth-child(2) {
            margin-left: 5px;
          }
        }
        .touxiang {
          margin-left: 13px;
          vertical-align: middle;
          width: 40px;
          height: 40px;
          background-color: pink;
          border-radius: 50%;
        }
        & span {
          margin-left: 10px;
          font-size: 20px;
        }
        & p {
          margin-left: 5px;
          display: inline-block;
          font-size: 13px;
        }
      }

      .DesignTeam-content-button {
        float: right;
        color: #fff;
        width: 88px;
        height: 28px;
        background-color: #b3b3b3;
        border: none;
        margin-top: 19px;
        margin-right: 34px;
      }
    }
    .DesignTeam-content-bottom {
      display: flexbox;
      padding: 19px 12px 16px 19px;
      display: flex;
      justify-content: space-evenly;
      div {
        width: 80px;
        height: 70px;

        img {
          border-radius: 10px;
          width: 100%;
          height: 100%;
          background-color: pink;
        }
      }
    }
  }
}
</style>
